<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>网关详情</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../../css/public.css" media="all" />
</head>
<body class="childrenBody">
	<!--数据表格开始-->
	<div >
		<table id="gatewayList2" lay-filter="gatewayList2" ></table><!--yw 显示列表数据-->
	</div>
	<div>
		<ul class="layer-photos-demo" id="Images"></ul>
	</div>
	<!--数据表格结束-->
	<script type="text/javascript" src="../../layui/layui.js"></script>
	<script>

		//yw 1初始化
layui.use(['jquery','flow','form','table','layer'],function(){
	var $ = layui.jquery;
	var flow = layui.flow;
    var form = layui.form;
    var table= layui.table;
    var layer = layui.layer;
	
	//流加载图片
    var imgNums = 30;  //单页显示图片数量
    flow.load({
        elem: '#Images', //流加载容器
        done: function(page, next){ //加载下一页
            $.get("../../json/gatewayDetail.json",function(res){
                //模拟插入
                var imgList = [],data = res.data;
				var maxPage = imgNums*page < data.length ? imgNums*page : data.length;
                setTimeout(function(){
                    for(var i=imgNums*(page-1); i<maxPage; i++){
                        imgList.push('<li><img layer-src="../../'+ data[i].src +'" src="../../'+ data[i].thumb +'"><div style="text-align: center;">'+ data[i].alt +'</div><div>ID：'+ data[i].pid +'</div><div>设备编号：'+ data[i].eqID +'</div><div>设备型号：'+ data[i].eqType +'</div><div>在线状态：'+ data[i].onlStatus +'</div></li>');
                    }
                    next(imgList.join(''), page < (data.length/imgNums));
                    form.render();
                }, 500);
            });
        }
    });

    //设置图片的高度
    $(window).resize(function(){
        $("#Images li img").height($("#Images li img").width());
    })
//yw 2加载 网关列表
        var tableIns = table.render({
        elem: '#gatewayList2',
        url : '../../json/gatewayListDetail.json',
        id : "gatewayListTable2",
        cols : [[
            //yw {type: 'checkbox',fixed:'left'},
            {field: 'gatewayId', title: '网关编号', width:100,align:'center'},
            {field: 'gatewayMac', title: '网关MAC地址', width:160,align:'center'},
            {field: 'classroom', title: '教室', width:220,align:'center'},
            {field: 'eqNumber', title: '设备数量',width:100,align:'center'},
            {field: 'acTime', title: '激活时间', width:180,align:'center'},
            {field: 'onlineStatus', title: '在线状态',align:'center'},
        ]]
	});
})
	</script>
</body>
</html>